<template>
  <div class="login">
    <el-card >
      <div slot="header">
        <span>后台管理人员登录</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
          <el-form-item label="账户：" prop="login">
            <el-input v-model="form.login"/>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="form.password"/>
          </el-form-item>
          <el-row>
            <el-col :offset="10">
              <el-button type="success" @click="login()">登录</el-button>
              <el-button type="primary" @click="register()">注册</el-button>
            </el-col>
          </el-row>
        </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    data () {
      return {
          form:{},
        rules: {
          login: [{ required: true, message: '请输入正确的用户名' }],
          password:[{required:true,message:'请输入正确的密码'}]
        }
      }

    },
    methods:{
        login() {
            this.$refs.form.validate(valid=>{
                if (!valid){
                    return;
                }
                this.$http.post('/login',this.form).then(resp=>{
                    var result=resp.data;
                    if(result.status){
                        localStorage.token=result.token;
                        localStorage.menuUrls=result.url;
                        this.$router.push('/');
                    }else {
                        this.$message.error(result.error);
                    }
                })
            })
        },
      register(){
            this.$router.push('/lore/register')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .login {
    width: 360px;
    margin: 70px auto;
  }
</style>
